<template>
  <el-date-picker
    ref="el"
    v-model="date"
    style="width: 100%"
    v-bind="props"
    :picker-options="pickerOptions"
  />
</template>

<script>
import Vue from 'vue';
import {DatePicker} from "element-ui";
Vue.use(DatePicker);
/**
 * 日期选择组件，element-ui的[el-date-picker](https://element.eleme.cn/2.13/#/zh-CN/component/date-picker)
 */
export default {
  name: "ErpFormDate",
  model: {
    prop: 'value',
    event: 'value-change'
  },
  props: {
    /**
     * 标题
     * @public
     */
    title: {
      type: String,
      default: '',
    },
    /**
     * 字段
     * @public
     */
    field: {
      type: String,
      default: ''
    },
    /**
     * 值
     * @public
     */
    value: {
      default () {
        return '';
      }
    },
    /**
     * [属性配置](https://element.eleme.cn/2.13/#/zh-CN/component/date-picker#attributes)
     * @public
     */
    props: {
      type: Object,
      default () {
        return {
        };
      }
    },
    /**
     * 额外配置
     * ```js
     * return {
          // 单位 毫秒（ms）和秒（s）
          unit: 'ms',
          // 默认选择当前
          defaultNow: false
        }
     ```
     * @public
     */
    extra: {
      type: Object,
      default () {
        return {
          // 单位 毫秒（ms）和秒（s）
          unit: 'ms',
          // 默认选择当前
          defaultNow: false
        };
      }
    }
  },
  computed: {
    unit () {
      return this.extra && this.extra.unit ? this.extra.unit : 'ms';
    },
    defaultNow () {
      return this.extra && this.extra.defaultNow === true;
    },
    date: {
      get () {
        let returnDate = this.value;
        if (this.props['value-format'] === 'timestamp' || this.props['valueFormat'] === 'timestamp' && this.unit === 's') {
          returnDate = !this.value ? this.value : this.value * 1000;
        }
        return returnDate;
      },
      set (val) {
        let value = val;
        if (this.props['value-format'] === 'timestamp' || this.props['valueFormat'] === 'timestamp') {
          if (this.unit === 's') {
            value = value ? parseInt(value / 1000) : "";
          }
        }
        this.$emit('value-change', value);
      }
    },
    pickerOptions () {
      let type = this.$props.props.type;
      if (!this.$props.props.pickerOptions) {
        let options = {
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        };
        if (type === 'datetimerange' || type === 'daterange' || type === 'monthrange') {
          options = {};
        }
        return options;
      }
      return this.$props.props.pickerOptions;
    }
  },
  watch: {
    value: {
      handler (date) {
        if (this.defaultNow && !date) {
          this.date = (new Date()).getTime();
        }
      },
      immediate: true
    },
  },
  mounted() {
  },
  methods: {
    /**
     * 使 input 获取焦点
     * @public
     */
    focus () {
      this.$refs.el.focus();
    },
    /**
     * 监听到切换日期
     * @param e 日期
     * @private
     */
    handleChange (e) {
      this.date = e;
      // if (this.unit === 'ms') {
      //     this.$emit('value-change', e)
      // } else if (this.unit === 's') {
      //     this.$emit('value-change', parseInt(e / 1000))
      // }
    }
  }
};
</script>

<style scoped>

</style>
